{% extends "base/base.html" %}
{% load static %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'products/css/home.css' %}">
{% endblock %}

{% block content %}
    <header class="text-center py-4">
        <h2 class="text-primary">欢迎使用CoolYunTest</h2>
    </header>

    <template id="product-card-template">
        <div class="col" data-product-id="">
            <div class="card product-card h-100">
                <!-- 卡片内容区 -->
                <div class="card-header bg-white">
                    <img class="product-logo" src="" alt="LOGO">
                </div>
                <div class="card-body">
                    <h5 class="card-title product-name"></h5>
                    <p class="card-text product-description"></p>
                </div>

                <!-- 分页标记区（严格匹配图片样式） -->
                <div class="card-footer bg-transparent border-0 py-2">
                    <div class="pagination-mark">
                        <span class="current-page">«1»</span>
                        <span class="page-number">2</span>
                        <span class="page-number">3</span>
                        <span class="next-page">»</span>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- 产品卡片容器 -->
    <div class="container min-vh-75">
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 justify-content-center" id="products-container">
            <!-- 动态内容 -->
        </div>
    </div>

    <!-- 添加卡片模板 -->
    <template id="add-card-template">
        <div class="col">
            <div class="card add-card h-100">
                <div class="card-body d-flex flex-column justify-content-center align-items-center">
                    <button class="btn btn-link text-reset">
                        <i class="fas fa-plus-circle fa-3x text-muted"></i>
                    </button>
                    <span class="text-muted mt-2">添加新产品</span>
                </div>
            </div>
        </div>
    </template>

    <!-- 分页组件 -->
    <div class="container">
        <nav aria-label="分页导航" class="my-4">
            <ul id="pagination" class="pagination justify-content-center"></ul>
        </nav>
    </div>

    <!-- 添加产品弹窗 -->
    {% include 'products/includes/add-product-modal.html' %}



{% endblock %}

{% block extra_scripts %}
    <script src="{% static 'products/js/home.js' %}"></script>
{% endblock %}